<!--
 * @Descripttion: 基础资料
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-04 20:05:29
-->
<template>
  <div class="dile-rootForm">
    <div class="dile-rootForm-content" v-loading="basicDataParam.loading">
      <el-form
        ref="formRef"
        class="el-form-card"
        :model="basicDataParam.formData"
        :rules="formRules"
        label-width="7rem"
        size="large"
        status-icon
      >
        <el-card>
          <template #header>
            <span>{{ $t("page.systemManageArr.personSetArr.basicData") }}</span>
          </template>

          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.name') + ':'"
            >
              <span>{{ basicDataParam.formData.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.jobNumber') + ':'"
            >
              <span>{{ basicDataParam.formData.code }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.account') + ':'"
              prop="account"
            >
              <span>{{ basicDataParam.formData.account }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.sex') + ':'"
            >
              <span>{{ basicDataParam.formData.sex }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="
                $t('page.organizeManageArr.departmentArr.department') + ':'
              "
            >
              <span>{{ basicDataParam.formData.extJson.departmentName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.postmentArr.post') + ':'"
            >
              <span>{{ basicDataParam.formData.extJson.jobPostName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.telephone')"
              prop="telephone"
            >
              <el-input
                v-model="basicDataParam.formData.telephone"
                :placeholder="$t('common.enter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="$t('page.organizeManageArr.personArr.headImg')"
              prop="headImg"
            >
              <el-upload
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :limit="1"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-card>
      </el-form>
    </div>
    <div class="dile-rootForm-footTool">
      <el-button type="success" @click="handleSave">{{
        $t("common.define")
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import type { object_Inf } from "@/utils/typings/index.type";
import { Plus } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import Dile_StoreAction from "@storeAction/index";
import Dile_APi from "@/api";
import Dile_Methods from "@/utils/methods";

let { t } = useI18n();

/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => {
  return {
    id: 0,
    name: "", //姓名
    code: "", //工号
    account: "", //用户名
    sex: "男", //性别
    departmentId: null, //部门
    jobPostId: null, //岗位
    telephone: "", //手机
    emailAddress: "", //邮箱
    status: true, //状态
    remark: "", //备注
    headImg: "", //头像
    extJson: {
      departmentName: "", //部门名称
      jobPostName: "", //岗位名称
    },
  };
};
/**
 * @Author: xzh
 * @Descripttion:基础资料表单
 * @Param:
 */
let basicDataParam = reactive<object_Inf>({
  loading: false,
  //表单数据
  formData: defaultData(),
});
/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    telephone: [
      {
        validator: (rule: any, value: any, callback: any) => {
          //验证手机号
          Dile_Methods.validator_phone(value) || !value
            ? callback()
            : callback(new Error(t("common.message.pleaseEnterRightPhone")));
        },
        trigger: "change",
      },
    ],
  });
});
/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(() => {
  initCurrentUserInfo();
});

/**
 * @Author: xzh
 * @Descripttion: 加载当前用户信息
 * @Param:
 */
let initCurrentUserInfo = async () => {
  try {
    basicDataParam.loading = true;
    let { id }: object_Inf = Dile_StoreAction.currentUserInfo(),
      data = await Dile_APi.getUserInfoById(id);
    Object.assign(basicDataParam.formData, data);
  } finally {
    basicDataParam.loading = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let handleSave = async () => {
  let { formData, loading } = toRefs(basicDataParam),
    valid = await formRef.value.validate();
  if (!valid) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveUser(formData.value);
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped></style>
